.main.is-wide-layout.plugins-browser--site-view {
	max-width: 100%;
}

.plugins-browser__billling-interval-switcher {
	margin-right: 15px;
}

.plugins-browser__main-buttons {
	display: flex;
	align-items: center;

	@media screen and (max-width: 960px) {
		.plugins-browser__button {
			border: none;
		}
	}

	.plugins-browser__button {
		white-space: nowrap;
		display: flex;
		align-items: center;
		height: 32px;

		.plugins-browser__button-icon {
			margin-right: 5px;
		}

		&:not(:last-child) {
			@include breakpoint-deprecated( ">480px" ) {
				margin-right: 10px;
			}
		}
	}
}

.plugins-browser__clear-filters,
.plugins-browser__clear-filters:visited {
	text-decoration: underline;
	color: var(--studio-black);
}

.plugins-browser__no-results {
	padding-top: 32px;
	@include breakpoint-deprecated( "<660px" ) {
		margin: 0 16px;
	}

	.plugins-browser-list {
		padding-top: 0;
	}
}
.has-no-sidebar .plugins-browser__main-container {
	position: relative;

	&::before {
		box-sizing: border-box;
		content: "";
		background-color: #fff;
		position: absolute;
		height: 100%;
		width: 200vw;
		left: -100vw;
		z-index: -1;
	}

}

.plugins-browser__main-container .plugins-browser-list:last-of-type {
	padding-bottom: 32px;
}

.plugins-browser__upgrade-banner {
	display: table;
	width: 100%;

	.banner.card {
		margin: 48px 0 0;
	}
}

body.is-section-plugins #primary .main.is-logged-out {
	// Need to specifically set this, to override the classic blue.
	--wp-admin-theme-color: var(--studio-blue-50);
	padding-top: 0;

	.responsive-toolbar-group__swipe-list {
		background: none;
		margin-bottom: 22px;
	}

	.responsive-toolbar-group__dropdown {
		margin-bottom: 20px;
		padding: 0 8px;

		.responsive-toolbar-group__button-item {
			padding: 4px 12px;

			&::before {
				background-color: transparent;
			}

			&:not([class*="is-pressed"]):hover::before {
				background-color: color-mix(in srgb, var(--studio-blue) 10%, transparent);
			}


		}
	}
	.full-width-section {
		.responsive-toolbar-group__swipe-list > div:not(:first-child) {
			flex-grow: 1;
		}
		.components-button {
			height: 44px;
			border-radius: 4px;
			padding: 16px;
			width: 100%;

			&:not([class*="is-pressed"]) {
				color: var(--studio-gray-100);
			}

			&::before {
				height: 44px;
				background-color: var( --studio-gray-0 );
			}

			&:not([class*="is-pressed"]):hover::before {
				background-color: var( --studio-gray-5 );
			}

		}
	}

	.components-button.is-pressed::before {
		background: var(--studio-blue-50);
		left: 0;
		right: 0;
	}
}

// Jetpack injects a banner on the /plugins page for jetpack sites
.is-section-plugins .layout__content > .banner {
	// This moves it down out from under our sticky header
	margin-top: 50px;

	// And removes the extra padding on the main content
	+ .layout__secondary + .layout__primary main {
		padding-top: 0;
	}
}
.full-width-section {
	.plugins-results-header__action {
		font-size: $font-body-small;
		text-decoration: none;
	}
}

.full-width-section.plugins-browser__search-header {
	padding-top: 157px;
	padding-bottom: 32px;
	position: relative;
	overflow: hidden;


	.is-section-plugins:not(:has(.lpc-header-nav-wrapper)) & {
		padding-top: 165px;

		@media screen and ( max-width: 600px ) {
			padding-top: 93px;
		}
	}

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 50%;
		min-width: 848px;
		height: 100%;
		background-image: url(/calypso/images/plugins/plugins_hero_2.svg);
		background-position: right bottom;
		background-repeat: no-repeat;
		pointer-events: none;

		@media screen and ( max-width: 600px ) {
			background-image: url( /calypso/images/plugins/plugins_hero_2_m.svg );
			left: 0;
			min-width: 0;
			width: 100%;
		}
	}

	.full-width-section__content {
		position: relative;
	}

	body.is-section-plugins #primary & .search-box-header::before {
		display: none;
	}
	@media screen and ( max-width: 600px ) {
		padding-top: 95px;
		padding-bottom: 0;

		.search-box-header__sticky-ref {
			padding-bottom: 30px;
		}
	}
}

.plugins-browser__categories {
	padding-bottom: 0;
}
.plugins-discovery-page__education-footer {
	padding-bottom: 72px;

	@media screen and ( max-width: 600px ) {
		padding-bottom: 48px;
	}
}
.plugins-browser__faq {
	background-color: var(--studio-gray-100);
}

